<template>
	<view class="container">
		<view>
			<text class="title">我是首页</text>
		</view>
		<view>

			<uni-list :border="true">
				<uni-list-item v-for="(item, index) in list" :key="index" :title="item.title" clickable
					link="navigateTo" :note="item.note"
					:thumb="item.icon==null ? 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' :item.icon"
					:to="item.toPath " @click="onClick(item, index)" />
			</uni-list>


			<uni-list-item link="navigateTo">
				<template v-slot:header>
					<view>
						<uni-icons type="plus" size="30"></uni-icons>
					</view>
				</template>
				<template v-slot:body>
					<text class="slot-box slot-text">自定义两侧插槽</text>
				</template>
			</uni-list-item>
			<uni-load-more :status="status" iconType="auto" :iconSize="34"></uni-load-more>

		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'

	const contentText = ref("w")
	const status = ref("more")

	const list = ref([{
			title: "生命周期",
			note: "演示uniapp的生命周期函数的使用",
			toPath: "/pages/lifecycle-detail/index",
			icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
		},
		{
			title: "navigator页面跳转",
			note: "演示uniapp组件navigator页面跳转的使用",
			toPath: "/pages/navigator/navigator",
			icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
		},
		{
			title: "button",
			note: "演示uniapp组件button的使用",
			toPath: "/pages/button/button",
			icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
		},
		{
			title: "input",
			note: "演示uniapp组件input的使用",
			toPath: "/pages/input/input",
			icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
		},
		{
			title: "sass",
			note: "演示uniapp组件sacc的使用",
			toPath: "/pages/sass/sass",
			icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
		},
		{
			title: "form",
			note: "演示uniapp组件forms的使用",
			toPath: "/pages/form/form",
			icon: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
		}
	])



	const onClick = () => {
		console.log("onClick");
	}


	// 下拉刷新时触发
	onPullDownRefresh(() => {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	})


	//下拉触底刷新
	onReachBottom(() => {
		status.value = "loading"

		setTimeout(() => {
			status.value = "more"
		}, 1000)
	})
</script>

<style lang="scss">
	.container {
		background: #dadada;
		width: 100vw;
		height: 100vh;

		.title {
			display: block;
			text-align: center;
			// 检查到有重复的 .title 选择器，可能导致样式不生效，这里合并样式确保生效
			color: lightseagreen;
			font-size: 28px;
		}
	}
</style>